<template>
  <f7-page>
    <f7-navbar title="我的团队" back-link="返回"></f7-navbar>

    <div class="total-box">
      <div>
       <div>
         <h2>{{teamCount || 0}}</h2>
         <p>团队人数</p>
       </div>
        <div>
          <h2>{{infoData.total_yeji || 0}}</h2>
          <p>团队总业绩</p>
        </div>
        <div>
          <h2>{{infoData.min || 0}}</h2>
          <p>小区业绩</p>
        </div>
      </div>
      <div>
        <div>
          <h2>{{infoData.today_num || 0}}</h2>
          <p>今日团队新增人数</p>
        </div>
        <div>
          <h2>{{infoData.today_yeji || 0}}</h2>
          <p>今日团队新增业绩</p>
        </div>
        <div>
          <h2>{{infoData.today_min_yeji || 0}}</h2>
          <p>今日小区新增业绩</p>
        </div>
      </div>
    </div>

    <div class="tree-tips">
      <div>
        <img src="../assets/tt_003.png" alt="">
        <span>红框内为大区</span>
      </div>
      <div>
        <img src="../assets/tt_004.png" alt="">
        <span>蓝框内为小区</span>
      </div>
    </div>

    <div class="tree-box">
      <tree
        :data="list"
        :expand-icon="{
          open: 'iconfont icon-jia',
          close: 'iconfont icon-jian'
        }"
        @onToggle="init"
      ></tree>
    </div>
  </f7-page>
</template>

<script>
  import Tree from '../AJ-components/tree'
  import { getMyTeam } from "../api/home";

  export default {
    name: "my-team",
    data() {
      return {
        list: [/*
          {
            name: 'aaaa',
            expand: true,
            big: true,
            children: [
              {
                name: 'aaaa-1'
              }
            ]
          },
          {
            name: 'bbbb',
            expand: false,
            children: [
              {
                name: 'bbbb-1',
                expand: false,
                children: [
                  {
                    name: 'bbbb-2'
                  }
                ]
              },
              {
                name: 'bbbb-2'
              }
            ]
          }
        */],
        infoData: {},
        teamCount: 0
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init(node) {
        this.$toast.loading();
        getMyTeam({uid: node?node.uid:undefined}).then(res => {
          if(!node) {
            this.infoData = res.list;
            this.teamCount = res.count;
            this.list = res.data.map((item, index) => {
              if (index ===0) {
                item['big'] = true;
              }
              if(item.pid_status === 1) {
                item['children'] = [];
                item['expand'] = false;
              }
              return item;
            })
          } else {
            node.children = res.data;
            node.expand = !node.expand;
          }
          this.$toast.clear();
        })
      }
    },
    components: {
      Tree
    }
  }
</script>

<style scoped lang="scss">
  .total-box {
    padding: 70px $padding 0;
    > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 70px;
      div {
        text-align: center;
        flex: 1;
        &:nth-child(2) {
          border-left: 1px solid $borderColor;
          border-right: 1px solid $borderColor;
        }
        h2 {
          font-weight: normal;
          color:rgba(23,29,53,1);
          background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
        }
      }
    }
  }
  .tree-tips {
    display: flex;
    justify-content: center;
    padding-bottom: $padding;
    > div {
      display: flex;
      align-items: center;
      padding: 0 $padding;
      font-size: 23px;
      &:first-child {
        span {
          color: #F82D2E;
        }
      }
    }
    img {
      width: 40px;
      margin-right: 10px;
    }
  }
  .tree-box {
    padding: $padding;
  }
</style>